<template>
    <div class="container" :class="{ dark: value1 == true }">
        <img class="bg" src="@/assets/login.svg" />
        <el-switch v-model="value1" class="switch" />
        <div class="box">
            <p class="text">用户登录</p>
            <div class="user">
                <p>账号:</p>
                <el-input class="input" v-model="username" style="width: 240px" placeholder="Please input" />
            </div>
            <div class="user">
                <p>密码:</p>
                <el-input class="input" v-model="password" style="width: 240px" placeholder="Please input" />
            </div>
            <div class="user">
                <p>验证码:</p>
                <el-input class="input" v-model="code" placeholder="Please input">
                    <template #append>1234</template>
                </el-input>
            </div>
            <div class="user">
                <p>验证码:</p>
                <el-input class="input" v-model="code2" placeholder="Please input">
                    <template #append><el-button @click="sendCode" :disabled="flag">{{ msg }}</el-button></template>
                </el-input>
            </div>
            <el-button type="primary" class="btn" @click="onLogin"> 登录</el-button>
        </div>
    </div>
</template>
<script>
import request from "@/utils/request"
import { ElMessage } from 'element-plus'
export default {
    data() {
        return {
            username: '',
            password: '',
            code: '',
            code2: '',
            value1: false,
            msg: '发送验证码',
            timer: null,
            count: 10
        }
    },
    computed: {
        flag() {
            if (this.msg == '发送验证码') {
                return false
            } else {
                return true
            }
        }
    },
    methods: {
        onLogin() {
            request.post('/login', {
                username: this.username,
                password: this.password,
                code: this.code
            }).then(res => {
                if (res.data.code == 200) {
                    // 登陆成功：提示成功，跳转到首页，保存token
                    ElMessage({
                        message: '登录成功',
                        type: 'success',
                    })
                    // 保存token
                    localStorage.setItem("token", res.data.token)
                    // 保存账户名
                    localStorage.setItem("username", this.username)
                    // 跳转到首页
                    this.$router.push("/")
                } else {
                    // 没有登录成功，提示后端传过来的message
                    ElMessage.error(res.data.message)
                }
            })
        },
        sendCode() {
            this.timer = setInterval(() => {
                this.count--
                if (this.count == 0) {
                    this.msg = "发送验证码"
                    // 清除定时器
                    clearInterval(this.timer)
                    // 重置时间
                    this.count = 10
                } else {
                    this.msg = this.count + 's后重新发送'
                }
            }, 1000);

        }
    }
}

</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100%;
    min-height: 100vh;

    &.dark {
        background: #000;
    }

    .switch {
        position: fixed;
        right: 40px;
        top: 20px;
    }

    .bg {
        position: absolute;
        bottom: 30px;
        left: 0;
        width: 600px;
    }

    .box {
        width: 400px;
        height: 300px;
        // background: rgb(76, 76, 76);
        position: absolute;
        left: 70%;
        top: 60%;
        transform: translate(-50%, -50%);
        padding: 20px;

        .text {
            text-align: center;
            font-size: 20px;
            color: #807c7c;
            font-weight: 600;
            margin-bottom: 20px;
        }

        .user {
            width: 380px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            margin-bottom: 20px;

            p {
                width: 60px;
                color: #807c7c;
                text-align: center;
            }

            .input {
                flex: 1
            }


        }

        .btn {
            width: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 40px auto;
        }
    }

}

.el-input {
    width: 240px;
    margin: 0 auto;
}

.el-input__inner {
    width: 240px;
    margin: 0 auto;
}
</style>
